<template>
  <!-- 大客户项目跟进管理->客户跟进记录 -->
  <div>
    <!-- 搜索 -->
    <TopFilter
      :list="topFilterInit"
      :cols="3"
      labelWidth="110"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :isSelectColumn="isSelectColumn"
      :params="fetchParams"
      :datakey="'records'"
      columnsRef='customerManage_continueManage_record_index_01'
      :onColumnsChange="columns => this.columns = columns"
    ></FilterTable>
    <Drawer
      ref="infoDrawer"
      :visible.sync="visibleDrawer"
      title="客户跟进计划"
      :width="970"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <info-modal v-model="infoId" :infoType="type" :rowData="formData" @close="infoClose" />
    </Drawer>

    <Drawer
      ref="infoDrawer"
      :visible.sync="visibleDrawer2"
      title="客户跟进计划"
      :width="970"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <info-modals v-model="infoId" :infoType="type" :rowData="formData" @close="infoClose" />
    </Drawer>
    <!-- 经销商弹窗 -->
    <BaseDialog
      title="经销商查询"
      :visible.sync="visibleDealer"
      width="1000px"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <dealer-madal ref="dealerDialog" @close="closeDealer" />
    </BaseDialog>
  </div>
</template>
<script>
import dealerMadal from '../../clue/areaBossPush/dealerMadal';
import { propertyList } from '@/api/cms-api/customerManage/continueManage/record/index';
import infoModal from './edit';
import infoModals from './show';
import { dictionary } from '@/utils/dictMixin';
import { region } from '@/api/cms-common/region';
import { formatdateByDay } from '@/utils/index';
export default {
  mixins: [dictionary, region],
  components: {
    infoModal,
    infoModals,
    dealerMadal
  },

  data() {
    return {
      visibleDrawer: false,
      visibleDrawer2: false,
      isSelectColumn: false,
      visibleDealer: false,
      fetchApi: propertyList, //ipa 接口
      topFilterInit: this.topFilterInitFun(),
      infoId: '', //记录行id
      type: 'add', //add编辑 ，info详情
      flterValue: {}, //参数
      columns: this.creatHeader(),
      fetchParams: {},
      formData: {}
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.initProvince();
  },
  methods: {
    //初始化所在省份
    initProvince() {
      let pl = this.createRegionList();
      console.log(pl);
      this.topFilterInit[3].itemList = pl;
    },
    formatDates: function(value) {
      // 这里的 value 就是需要过滤的数据
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '-' + month + '-' + day;
    },
    //搜索数据
    topFilterInitFun() {
      return [
        { type: 'INPUT', label: '客户公司名称', fieldName: 'customerName', placeholder: '请输入', initialValue: '' },
        { type: 'SELECT', label: '客户类型', fieldName: 'customerType', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2506') },
        { type: 'SELECT', label: '客户性质', fieldName: 'customerProperty', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2534') },
        {
          type: 'SELECT',
          label: '省份',
          fieldName: 'customerProvince',
          placeholder: '请选择',
          initialValue: '',
          itemList: []
        },
        { type: 'SELECT', label: '客户状态', fieldName: 'customerStatus', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2507') },
        { type: 'INPUT', label: '项目名称', fieldName: 'projectName', placeholder: '请输入', initialValue: '' },
        {
          type: 'RANGE_DATE',
          label: '预计下次跟进日期',
          fieldName: 'planDate',
          valueFormat: 'yyyy-MM-dd', //返回数据格式
          initialValue: '',
          placeholder: '请选择'
        },
        {
          type: 'RANGE_DATE',
          label: '实际跟进日期',
          fieldName: 'followDate',
          valueFormat: 'yyyy-MM-dd', //返回数据格式
          initialValue: '',
          placeholder: '请选择'
        },
        { type: 'SELECT', label: '项目跟进状态', fieldName: 'projectFollowUpStatus', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2581') }
      ];
    },
    //搜索获取数据
    changeHandle(val) {
      var time = val.planDate;
      var time1 = val.followDate;
      val = Object.assign({}, { planDateStart: formatdateByDay(time[0]) }, val);
      val = Object.assign({}, { planDateEnd: formatdateByDay(time[1]) }, val);
      val = Object.assign({}, { followDateStart: formatdateByDay(time1[0]) }, val);
      val = Object.assign({}, { followDateEnd: formatdateByDay(time1[1]) }, val);
      console.log(val);
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
      //this.fetchParams = val;
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            if (this.formatDates(props.row.projectEndDate) < this.formatDates(new Date()) || props.row.projectFollowUpStatus == 25811006 || props.row.projectFollowUpStatus == 25811007 || props.row.projectFollowUpStatus == 25811008) {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.detailHandle2(props.row)}>
                    详情
                  </el-button>
                </div>
              );
            } else {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                    跟进{' '}
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button size="mini" type="text" onClick={() => this.detailHandle2(props.row)}>
                    详情
                  </el-button>
                </div>
              );
            }
          }
        },
        {
          title: '项目跟进状态',
          dataIndex: 'projectFollowUpStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.projectFollowUpStatus, '2581')}</span>;
          }
        },
        { title: '项目名称', dataIndex: 'projectName', sorter: true },
        { title: '客户公司名称', dataIndex: 'customerName', sorter: true },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerType, '2506')}</span>;
          }
        },
        {
          title: '客户性质',
          dataIndex: 'customerProperty',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerProperty, '2534')}</span>;
          }
        },
     //   { title: '事业部', dataIndex: 'deptName', sorter: true },
         { title: '事业部', dataIndex: 'majorManagerId', 
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.majorManagerId, '2566')}</span>;
          }
         },  
        
        { title: '经销商', dataIndex: 'dealerName', sorter: true },
        {
          title: '所在省',
          dataIndex: 'customerProvince',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerProvince)}</span>;
          }
        },
        {
          title: '所在市',
          dataIndex: 'customerCity',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerCity)}</span>;
          }
        },
        {
          title: '所在县/区',
          dataIndex: 'customerDistrict',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerDistrict)}</span>;
          }
        },
        { title: '详细地址', dataIndex: 'customerAddress', sorter: true },
        {
          title: '客户状态',
          dataIndex: 'customerStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerStatus, '2507')}</span>;
          }
        },
        {
          title: '客户来源',
          dataIndex: 'customerSource',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerSource, '2508')}</span>;
          }
        },
        { title: '成交机会率(%)', dataIndex: 'dealRate', sorter: true },
        {
          title: '预计下次跟进日期',
          dataIndex: 'planDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.planNextDate)} </span>;
          }
        },
        {
          title: '实际跟进时间',
          dataIndex: 'followDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.followDate)} </span>;
          }
        },
        {
          title: '实际跟进方式',
          dataIndex: 'followType',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.followType, '2519')}</span>;
          }
        },
        { title: '跟进人', dataIndex: 'followPeople', sorter: true },
        {
          title: '跟进状态',
          dataIndex: 'followStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.followStatus, '2520')}</span>;
          }
		},
        {
          title: '项目生效日期',
          dataIndex: 'projectStartDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.projectStartDate)} </span>;
          }
        },
        {
          title: '保护期到期日',
          dataIndex: 'projectEndDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.projectEndDate)} </span>;
          }
        },
      ];
    },
    //详情
    detailHandle(row) {
      //逻辑自己写
      this.visibleDrawer = true;
      this.formData = row;
      // this.infoId = 1000;
      // this.type = 'info';
    },
    //详情
    detailHandle2(row) {
      //逻辑自己写
      this.visibleDrawer2 = true;
      this.formData = row;
      // this.infoId = 1000;
      // this.type = 'info';
    },
    //关闭详情
    infoClose() {
      this.visibleDrawer2 = false;
       this.visibleDrawer = false;
      // if (type === 'refresh') {
      // 重新加载
      this.fetchParams = { ...this.fetchParams };
      // }
    },
    dealerHandle() {
      this.visibleDealer = true;
    },
    closeDealer(data) {
      this.visibleDealer = data.visible;
      this.topFilterInit[8].initialValue = '经销商名';
    }
  }
};
</script>

<style lang="less" scoped>
</style>
